<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-09-27 16:48:55
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-10-15 11:08:47
 * @FilePath: header.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-09-27 16:48:55
-->
<template>
  <view class="arco-picker-header">
    <view class="arco-picker-header-icon" @click="onSuperPrev">
      <svgIcon name="zuofanye"></svgIcon
    ></view>
    <view v-if="showPrev" class="arco-picker-header-icon" @click="onPrev">
      <svgIcon name="fanhui"></svgIcon>
    </view>
    <view class="arco-picker-header-title"> {{ title }}</view>
    <view v-if="showNext" class="arco-picker-header-icon" @click="onNext"
      ><svgIcon name="jinru"></svgIcon
    ></view>
    <view class="arco-picker-header-icon" @click="onSuperNext">
      <svgIcon name="fanye-you"></svgIcon>
    </view>
  </view>
</template>

<script lang="ts">
import { isFunction } from "@/utils/is";
import { computed, defineComponent } from "vue";
import svgIcon from "../arco-icon/index.vue";
const icon = defineComponent({
  name: "CalHeader",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  components: {
    svgIcon,
  },
  props: {
    title: {
      type: String,
      required: true,
    },
    mode: {
      type: String,
      default: "date",
    },
    value: {
      type: Object,
    },
    // onModeChange: {
    //   type: Function,
    //   required: true,
    // },
    headerOperations: {
      type: Object,
    },
  },
  setup(props) {
    function onPrev() {
      props.headerOperations.onPrev();
    }

    function onNext() {
      props.headerOperations.onNext();
    }

    function onSuperNext() {
      props.headerOperations.onSuperNext();
    }

    function onSuperPrev() {
      props.headerOperations.onSuperPrev();
    }

    return {
      onPrev,
      onNext,
      onSuperPrev,
      onSuperNext,
      showPrev: computed(() => isFunction(props.headerOperations.onPrev)),
      showSuperPrev: computed(() =>
        isFunction(props.headerOperations.onSuperPrev),
      ),
      showNext: computed(() => isFunction(props.headerOperations.onNext)),
      showSuperNext: computed(() =>
        isFunction(props.headerOperations.onSuperNext),
      ),
    };
  },
});
export default icon;
</script>

<style lang="scss" scoped>
.arco-picker-header {
  display: flex;
  justify-content: center;
  padding: 8px 16px;
  border-bottom: 1px solid $color-neutral-3;
}
.arco-picker-header-title {
  color: $color-text-1;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  padding: 0px 20rpx;
}
.arco-picker-header-icon {
  width: 24px;
  height: 24px;
  margin-right: 2px;
  margin-left: 2px;
  color: $color-text-2;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  background-color: $color-bg-popup;
  border-radius: 50%;
  transition: all 0.1s cubic-bezier(0, 0, 1, 1);
  user-select: none;
}
.arco-picker-header-icon:not(.arco-picker-header-icon-hidden) {
  cursor: pointer;
}
.arco-picker-header-icon:not(.arco-picker-header-icon-hidden):hover {
  background-color: $color-fill-3;
}
.arco-picker-header-label {
  padding: 2px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.1s;
}
.arco-picker-header-label:hover {
  background-color: $color-fill-3;
}
</style>
